<!--
 * @Author: 周小帆
 * @Date: 2021-08-24 21:50:00
 * @LastEditTime: 2021-08-25 14:16:12
 * @LastEditors: Please set LastEditors
 * @Description: 笔记管理列表
 * @FilePath: /web-blog/src/pages/dashboard/blog/index.vue
-->
<template>
  <div>
    <a-card>
      <div class="headeBox">
        <a-input-search placeholder="请输入文章标题" 
                        enter-button 
                        style="width: 200px;margin-right: 20px;" 
                        @search="onSearch" />
        <!-- 分类搜索 -->
        <a-select default-value="lucy" 
                  style="width: 120px" 
                  @change="handleChange" >
          <a-icon slot="suffixIcon" type="smile" />
          <a-select-option value="jack">
            Jack
          </a-select-option>
          <a-select-option value="lucy">
            Lucy
          </a-select-option>
          <a-select-option value="disabled" disabled>
            Disabled
          </a-select-option>
          <a-select-option value="Yiminghe">
            yiminghe
          </a-select-option>
        </a-select>
        <a-button type="primary" 
                  icon="search" 
                  class="searchBtn">搜索</a-button>
        <a-button type="primary" 
                  icon="plus" 
                  @click="addBtn"
                  class="addBtn">添加笔记</a-button>
        <a-button type="danger"
                  icon="delete"
                  class="delBtn"> 批量删除 </a-button>
      
      </div>
      <a-table :row-selection="rowSelection" 
               :columns="columns" 
               :data-source="data"
               bordered>
        <a-switch default-checked
                  slot="recommend"
                  @change="onChange" />
        <a-button type="primary" 
                  slot="operate" 
                  icon="edit"
                  @click="editNotes"
                  class="edit">编辑</a-button>
        <a-button type="danger" 
                  slot="operate" 
                  icon="delete">删除</a-button>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
  },
  {
    title: '标题',
    dataIndex: 'title',
  },
  {
    title: '类型',
    dataIndex: 'type',
  },
  {
    title: '推荐',
    dataIndex: 'recommend',
    scopedSlots: { customRender: 'recommend' },

  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '更新时间',
    dataIndex: 'upateTime',
  },
  {
    title: '操作',
    dataIndex: 'operate',
    scopedSlots: { customRender: 'operate' },

  },
];
const data = [
  {
    key: '1',
    id: '1',
    title: '入站须知！！',
    type: '计算机网络',
    status: '1',
    upateTime: '2021-8-20 10:30:02',
  },
  {
    key: '1',
    id: '1',
    title: '入站须知！！',
    type: '计算机网络',
    status: '1',
    upateTime: '2021-8-20 10:30:02',
  }
];
export default {
  data() {
    return {
      data,
      columns,
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  methods: {
    /**
     * 添加笔记
     */
    addBtn () {
      this.$router.push('/publish');
    },

    /**
     * 监听是否设置为推荐
     */
    onChange(checked) {
      console.log(`a-switch to ${checked}`);
    },

    /**
     * 编辑笔记
     */
    editNotes() {
      this.$router.push('/editNotes');
    }
  }
}
</script>

<style lang="less" scoped>
.edit {
  margin-right: 10px;
}

.headeBox {
  margin-bottom: 20px;
}

.searchBtn {
  margin-left: 10px;
}

.addBtn {
  margin-left: 20px;
}

.delBtn {
  margin-left: 20px;
}
</style>